<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图-->
        <el-card>
            <!--搜索与添加区域-->
            <el-row>
                <el-col :span="9">
                    <el-input placeholder="请输入内容" class="input-with-select"
                              v-model="queryInfo.query" clearable @clear="initPage">
                        <el-button slot="append" icon="el-icon-search" @click="initPage"></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!--表格区域-->
            <el-table
                    :data="tableData"
                    width="100%"
                    border
                    stripe>
                <el-table-column type="index" width="50px" label="#"></el-table-column>
                <el-table-column prop="code" label="订单编号"></el-table-column>
                <el-table-column prop="price" label="订单价格" width="80px"></el-table-column>
                <el-table-column prop="isPay" label="是否付款" width="100px">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.isPay" disable-transitions>已付款</el-tag>
                        <el-tag type="warning" v-else disable-transitions>未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isSent" label="是否发货" width="80px">
                    <template slot-scope="scope">
                        {{scope.row.isSent ? '是' : '否'}}
                    </template>
                </el-table-column>
                <el-table-column prop="orderDate" label="下单时间" width="180px"></el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="addressDialogVisible = true"
                                   icon="el-icon-edit"></el-button>
                        <el-button type="success" :disabled="!scope.row.isSent" size="mini" @click="logisticsDialogVisible = true"
                                   icon="el-icon-location"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <!--layout: 指定分页主键显示-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageIndex"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用户对话框-->
        <el-dialog
                title="修改地址"
                :visible.sync="addressDialogVisible"
                width="50%"
                @close="closeForm">
            <!-- 主体区域-->
            <el-form :model="form" ref="formRef" :rules="rules" status-icon>
                <el-form-item label="省市区/县" label-width="100px" prop="address_area">
                    <el-cascader class="address-el-cascader"
                                 ref="cascaderRef"
                                 v-model="form.address_area"
                                 :options="addressData"
                                 :props="cascaderProps"
                                 @change="handleChange"
                                 clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" label-width="100px" prop="address_detail">
                    <el-input v-model="form.address_detail" autocomplete="new-password"></el-input>
                </el-form-item>
            </el-form>
            <!--按钮区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addressDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editAddress">确 定</el-button>
              </span>
        </el-dialog>


        <!-- 物流消息 -->
        <el-dialog
                title="修改地址"
                :visible.sync="logisticsDialogVisible"
                width="50%"
                @close="closeLogisticsForm">
            <!-- 主体区域-->
            <el-timeline>
                <el-timeline-item :timestamp="item.time" placement="top" v-for="item in logistics" :key="item.id">
                    <el-card>
                        <h4>{{item.option}}</h4>
                        <p>{{item.context}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            <!--按钮区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="logisticsDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editAddress">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "OrderList",
        data() {
            const checkArea = (rule, value, callback) => {
                if (this.selectedAddr.length !== 3) {
                    callback(new Error('请选择省市区/县选项'));
                } else {
                    return callback();
                }
            };
            return {
                queryInfo: {
                    query: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                logistics: [
                    {
                        time: '2020-01-03 14:15:12',
                        ftime: '2020-01-03 14:15:12',
                        context: '当前揽件已签收',
                        location: '',
                        option: '已签收'
                    },
                    {
                        time: '2020-01-03 09:12:12',
                        ftime: '2020-01-03 09:12:12',
                        context: '[北京市]北京海淀于新校区营业点派件员 顺丰速运 93353正为您派件',
                        location: '',
                        option: '派送中'
                    },
                    {
                        time: '2020-01-02 12:15:12',
                        ftime: '2020-01-02 12:15:12',
                        context: '快件到达[北京海淀于新校区营业点]',
                        location: '',
                        option: '运输中'
                    },
                    {
                        time: '2020-01-02 02:12:12',
                        ftime: '2020-01-02 02:12:12',
                        context: '快件到达[北京海淀区总营业厅] 下一站 [北京海淀于新校区营业点]',
                        location: '',
                        option: '运输中'
                    },
                    {
                        time: '2020-01-01 09:12:12',
                        ftime: '2020-01-01 09:12:12',
                        context: '快件已发往[北京海淀区总营业厅]',
                        location: '',
                        option: '运输中'
                    },
                    {
                        time: '2020-01-01 00:00:00',
                        ftime: '2020-01-01 00:00:00',
                        context: '[山东市顺丰速运已揽件] 揽件员 王招娣 18779177562',
                        location: '',
                        option: '已揽件'
                    }
                ],
                tableData: [
                    {
                        id: 1,
                        code: 'sadf-jasd-ojfo-asdf-asdf-sadty-fasd',
                        price: 13.8,
                        isPay: true,
                        isSent: true,
                        orderDate: '2020-09-30 15:24:26',
                    }, {
                        id: 2,
                        code: 'sadf-jasd-ojfo-asdf-asdf-shjh-fasd',
                        price: 15.8,
                        isPay: false,
                        isSent: false,
                        orderDate: '2020-09-20 12:24:26',
                    }, {
                        id: 3,
                        code: 'sadf-jasd-ugjg-asdf-asdf-sadty-fasd',
                        price: 13.8,
                        isPay: true,
                        isSent: false,
                        orderDate: '2020-09-16 14:24:26',
                    }, {
                        id: 4,
                        code: 'sadf-jasd-ojfo-were-asdf-sadty-fasd',
                        price: 13.8,
                        isPay: true,
                        isSent: true,
                        orderDate: '2020-09-11 15:20:26',
                    }
                ],
                total: 100,
                form: {
                    address_area: [],
                    address_detail: ''
                },
                rules: {
                    address_detail: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                    ],
                    address_area: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                    ]
                },
                addressDialogVisible: false,
                logisticsDialogVisible: false,
                addressData: [
                    {
                        value: 'zhinan',
                        label: '指南',
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }, {
                                value: 'fankui',
                                label: '反馈'
                            }, {
                                value: 'xiaolv',
                                label: '效率'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }]
                        }, {
                            value: 'daohang',
                            label: '导航',
                            children: [{
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            }, {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }]
                        }]
                    }, {
                        value: 'zujian',
                        label: '组件',
                        children: [{
                            value: 'basic',
                            label: 'Basic',
                            children: [{
                                value: 'layout',
                                label: 'Layout 布局'
                            }, {
                                value: 'color',
                                label: 'Color 色彩'
                            }, {
                                value: 'typography',
                                label: 'Typography 字体'
                            }, {
                                value: 'icon',
                                label: 'Icon 图标'
                            }, {
                                value: 'button',
                                label: 'Button 按钮'
                            }]
                        }, {
                            value: 'form',
                            label: 'Form',
                            children: [{
                                value: 'radio',
                                label: 'Radio 单选框'
                            }, {
                                value: 'checkbox',
                                label: 'Checkbox 多选框'
                            }, {
                                value: 'input',
                                label: 'Input 输入框'
                            }, {
                                value: 'input-number',
                                label: 'InputNumber 计数器'
                            }, {
                                value: 'select',
                                label: 'Select 选择器'
                            }, {
                                value: 'cascader',
                                label: 'Cascader 级联选择器'
                            }, {
                                value: 'switch',
                                label: 'Switch 开关'
                            }, {
                                value: 'slider',
                                label: 'Slider 滑块'
                            }, {
                                value: 'time-picker',
                                label: 'TimePicker 时间选择器'
                            }, {
                                value: 'date-picker',
                                label: 'DatePicker 日期选择器'
                            }, {
                                value: 'datetime-picker',
                                label: 'DateTimePicker 日期时间选择器'
                            }, {
                                value: 'upload',
                                label: 'Upload 上传'
                            }, {
                                value: 'rate',
                                label: 'Rate 评分'
                            }, {
                                value: 'form',
                                label: 'Form 表单'
                            }]
                        }, {
                            value: 'data',
                            label: 'Data',
                            children: [{
                                value: 'table',
                                label: 'Table 表格'
                            }, {
                                value: 'tag',
                                label: 'Tag 标签'
                            }, {
                                value: 'progress',
                                label: 'Progress 进度条'
                            }, {
                                value: 'tree',
                                label: 'Tree 树形控件'
                            }, {
                                value: 'pagination',
                                label: 'Pagination 分页'
                            }, {
                                value: 'badge',
                                label: 'Badge 标记'
                            }]
                        }, {
                            value: 'notice',
                            label: 'Notice',
                            children: [{
                                value: 'alert',
                                label: 'Alert 警告'
                            }, {
                                value: 'loading',
                                label: 'Loading 加载'
                            }, {
                                value: 'message',
                                label: 'Message 消息提示'
                            }, {
                                value: 'message-box',
                                label: 'MessageBox 弹框'
                            }, {
                                value: 'notification',
                                label: 'Notification 通知'
                            }]
                        }, {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [{
                                value: 'menu',
                                label: 'NavMenu 导航菜单'
                            }, {
                                value: 'tabs',
                                label: 'Tabs 标签页'
                            }, {
                                value: 'breadcrumb',
                                label: 'Breadcrumb 面包屑'
                            }, {
                                value: 'dropdown',
                                label: 'Dropdown 下拉菜单'
                            }, {
                                value: 'steps',
                                label: 'Steps 步骤条'
                            }]
                        }, {
                            value: 'others',
                            label: 'Others',
                            children: [{
                                value: 'dialog',
                                label: 'Dialog 对话框'
                            }, {
                                value: 'tooltip',
                                label: 'Tooltip 文字提示'
                            }, {
                                value: 'popover',
                                label: 'Popover 弹出框'
                            }, {
                                value: 'card',
                                label: 'Card 卡片'
                            }, {
                                value: 'carousel',
                                label: 'Carousel 走马灯'
                            }, {
                                value: 'collapse',
                                label: 'Collapse 折叠面板'
                            }]
                        }]
                    }, {
                        value: 'ziyuan',
                        label: '资源',
                        children: [{
                            value: 'axure',
                            label: 'Axure Components'
                        }, {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        }, {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }]
                    }],
                //選中的父级分类数组
                selectedAddr: [],
                cascaderProps: {
                    expandTrigger: 'hover',
                    // 指定选中的值
                    value: 'value',
                    // 显示的值
                    label: 'label',
                    children: 'children'
                }
            }
        },
        created() {
            this.initPage();
        },
        methods: {
            initPage() {

            },
            handleChange() {
                if (this.selectedAddr.length !== 3) {
                    this.selectedAddr = [];
                }
            },
            editAddress() {
                this.$refs.formRef.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // TODO 然后发起真正的网络请求添加数据
                    this.$message.success('添加成功');
                    this.initPage();
                    this.addressDialogVisible = false;
                });
            },
            // 监听pageSize 改变
            handleSizeChange(newSize) {
                console.log(newSize);
                this.queryInfo.pageSize = newSize;
            },
            // 页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage);
                this.queryInfo.pageIndex = newPage;
            },
            closeForm() {
                console.log(this.$refs);
                this.form.address_area = [];
                this.$refs.formRef.resetFields();
            },
            closeLogisticsForm(){

            }
        }
    }
</script>

<style lang="less" scoped>
    .address-el-cascader {
        width: 100%;
    }
</style>
